<template>
	<div class="article-create">
		<el-card>
			<el-input clearable maxlength="20" v-model="title" class="title-input"
				:placeholder="$t('msg.article.titlePlaceholder')"></el-input>

			<el-tabs v-model="activeName">
				<el-tab-pane :label="$t('msg.article.markdown')" name="markdown">
					<markdown :detail="detail" :title="title" @onSuccess="onSuccess"></markdown>
				</el-tab-pane>
				<el-tab-pane :label="$t('msg.article.richText')" name="editor">
					<edit :detail="detail" :title="title" @onSuccess="onSuccess"></edit>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script setup>
	import Edit from './components/Edit'
	import Markdown from './components/Markdown'

	import {
		ref
	} from 'vue'

	import {
		articleDetail
	} from '@/api/article'

	import {
		useRoute
	} from 'vue-router'

	const activeName = ref('markdown')

	const title = ref('')

	const onSuccess = () => {
		title.value = ''
	}

	// 处理编辑相关
	const route = useRoute()
	const articleId = route.params.id
	const detail = ref({})

	const getArticleDetail = async () => {
		detail.value = await articleDetail(articleId)
		title.value = detail.value.title
	}

	// 如果是编辑文章才调用获取文章详情方法
	if (articleId) {
		getArticleDetail()
	}
</script>

<style lang="scss" scoped>
	.title-input {
		margin-bottom: 20px;
	}
</style>
